<template>
  <table class="table table-hover table-striped">
    <thead>
      <tr>
        <th v-for="(column, key) of tableAdapter.sortedKeys"
            :class="[ currentSortKey == key ? activeClass : '', tableAdapter.isSortableColumn(column, key) ? 'table-clickable-cell' : '' ]"
            @click="sortColumn(column, key, $event)">
          <component :is="tableAdapter.headerType(column, key)"
                     :cell-data="tableAdapter.header(column, key)"
                     v-if="tableAdapter.headerType(column, key)"></component>
          <span class="table-cell"
                v-else>
            {{ tableAdapter.header(column, key) }}
            <i class="fa" :class="currentSortStates[key] > 0 ? 'fa-angle-up' : 'fa-angle-down'"
               v-if="tableAdapter.isSortableColumn(column, key)"></i>
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, item) of tableAdapter.items" track-by="$index"
          :class="{ 'table-clickable-cell': tableAdapter.isClickableRow(row) }"
          @click="rowClick(row, item, $event)">
        <td v-for="(column, key) of tableAdapter.sortedKeys"
            :class="[ currentSortKey == key ? activeClass : '', tableAdapter.isClickableCell(row, column, key) ? 'table-clickable-cell': '' ]"
            @click="cellClick(row, column, item, key, $event)">
          <component :is="tableAdapter.itemType(row, column, key)"
                     :cell-data="tableAdapter.item(row, column, item, key)"
                     v-if="tableAdapter.itemType(row, column, key)"></component>
          <span class="table-cell" v-text="tableAdapter.item(row, col, item, key)" v-else>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script type="text/babel">
  export default {
    props: {
      tableAdapter: {
        type: Object,
        require: true
      }
    },
    data: function () {
      var currentSortStates = {}
      var self = this
      if (self.tableAdapter.sortedKeys) {
        self.tableAdapter.sortedKeys.forEach(function (item, index) {
          currentSortStates[item] = true
        })
      }
      return {
        currentSortStates: currentSortStates,
        currentSortKey: ''
      }
    },
    created: function () {
      var self = this
      if (self.tableAdapter) {
        var ext = function (obj, defaultOptions) {
          for (var key in defaultOptions) {
            if (!obj.hasOwnProperty(key)) {
              obj[key] = defaultOptions[key]
            }
          }
        }

        ext(self.tableAdapter, {
          activeClass: 'active',
          header: (column, key) => key,
          item: (row, column, item, key) => item[key],
          isSortableColumn: (column, key) => false,
          isClickableRow: (row) => false,
          isClickableCell: (row, column, key) => false,
          itemType: (row, column, key) => false,
          headerType: (column, key) => false
        })
      }
    },
    computed: {
      activeClass: function () {
        return this.adapter.activeClass
      }
    },
    methods: {
      asc: function (key) {
        var self = this
        if (typeof key === 'number') {
          key = self.sortedKeys[key]
        }
        if (!self.currentSortStates[key]) {
          self.currentSortStates[key] = true
        }
        self.currentSortKey = key
      },
      desc: function (key) {
        var self = this
        if (typeof key === 'number') {
          key = self.sortedKeys[key]
        }
        if (self.currentSortStates[key]) {
          self.currentSortStates[key] = false
        }
        self.currentSortKey = key
      },
      isAsc: function (key) {
        var self = this
        if (typeof key === 'number') {
          key = self.sortedKeys[key]
        }
        return self.currentSortStates[key]
      },
      rowClick: function (row, item, event) {
        var self = this
        var a = self.tableAdapter
        if (a.isClickableRow(row)) {
          self.$dispatch('on-table-view-click-row', self, row, item, event)
          if (self.$store) {
            self.$store.dispatch('ON_TABLE_VIEW_CLICK_ROW', self, row, item, event)
          }
        }
      },
      cellClick: function (row, column, item, key, event) {
        var self = this
        var a = self.tableAdapter
        if (a.isClickableCell(row, column, key)) {
          if (event) {
            event.stopPropagation()
          }
          self.$dispatch('on-table-view-click-cell', self, row, column, item, key, event)
          if (self.$store) {
            self.$store.dispatch('ON_TABLE_VIEW_CLICK_COLUMN', self, row, column, item, key, event)
          }
        }
      },
      sortColumn: function (column, key, event) {
        var self = this
        var a = self.tableAdapter
        if (a.isSortableColumn(column, key)) {
          self.$dispatch('on-table-view-sort-column', self, column, key, event)
          if (self.$store) {
            self.$store.dispatch('ON_TABLE_VIEW_SORT_COLUMN', self, column, key, event)
          }
        }
      }
    }
  }
</script>

<style scoped>
  .table-cell {
    display: block;
    height: 100%;
  }
  .table-clickable-cell {
    cursor: pointer;
  }
  .active {
    color: #00b0ff;
  }
</style>
